<template>
  <div>
    <basic-container>
      <div class="main_title warn_f"><b>工作流信息</b></div>
      <el-divider></el-divider>
      <div class="mb20">
        <div class="mb20">
          <span class="index_num warn_bg">1</span>
          <b>工作流</b>
        </div>
        <div class="mb20 flex_around pub_center deepgray_f steps">
          <div class="flex_center" style="align-items: baseline;">
            <div class="f20"><b>①</b></div>
            <div class="f16">编制</div>
          </div>
          <i class="el-icon-arrow-right f24 gray_f"></i>
          <div class="flex_center" style="align-items: baseline;">
            <div class="f20"><b>②</b></div>
            <div class="f16">审核</div>
          </div>
          <i class="el-icon-arrow-right f20 gray_f"></i>
          <template v-if="isOnlineReview">
            <div class="flex_center" style="align-items: baseline;">
              <div class="f20"><b>③</b></div>
              <div class="f16">评审</div>
            </div>
            <i class="el-icon-arrow-right f20 gray_f"></i>
          </template>
          <div class="flex_center" style="align-items: baseline;">
            <div class="f20">
              <b>{{ isOnlineReview ? '④' : '③' }}</b>
            </div>
            <div class="f16">批准</div>
          </div>
        </div>
        <div class="flex_start mb20">
          <el-checkbox size="small" class="" v-model="isOnlineReview" label="启用线上评审" border></el-checkbox>
          <div class="f12 gray_f">按照添加顺序签名</div>
        </div>
        <div class="tabledata gray_bg" v-if="isOnlineReview">
          <el-table :data="tableData" v-if="tableData.length" header-cell-class-name="gray_bg" row-class-name="gray_bg" style="width: 100%;margin-top: 20px;">
            <el-table-column type="index"  label="评审排序" width="80"></el-table-column>
            <!-- <el-table-column label="评审部门" prop="deptName"></el-table-column> -->
            <el-table-column label="评审人员" prop="userName"></el-table-column>
            <el-table-column label="编辑" fixed="right" width="90">
              <template slot-scope="scope">
                <i class="pointer main_co el-icon-edit f16" @click="addUser('edit',scope.row,scope.$index)"></i>
                <i class="error_f pointer el-icon-delete f16 ml30" @click="delUser(scope.$index)"></i>
              </template>
            </el-table-column>
          </el-table>
          <div class="main_co flex_start addbtn pointer" @click="addUser('add')">
            <i class="el-icon-circle-plus-outline f20"></i>
            <span class="ml10">增加评审人员</span>
          </div>
        </div>
      </div>
      <div>
        <div class="mb20">
          <span class="index_num warn_bg">2</span>
          <b>签名人员</b>
          <el-popover placement="top-start" width="300" trigger="hover">
            <div class="f12 deepgray_f">如果签名人员部门或名字不对，请联系系统超级管理员</div>
            <i slot="reference" class="el-icon-question f18 gray_f ml10"></i>
          </el-popover>
        </div>
        <div class="f14" v-for="(item, index) in guifanFilesProcessRecordList" :key="index">
          <div class="flex_start mb20" v-if="item.type == 0">
            <div>编制人:</div>
            <div class="border deepgray_f ml10 flex_item">{{ userInfo.deptName }}/{{ userInfo.real_name }}</div>
          </div>
          <div class="flex_start mb20" v-if="item.type == 1">
            <div>审核人:</div>
            <el-select class="ml10 flex_item"  placeholder="请选择" v-model="item.userId" size="small" ref="shenheuser" filterable @change="changeItemSelect($event,item)">
              <el-option v-for="(item, i) in Alluser" :key="i" :value="item.value" :label="item.label"></el-option>
            </el-select>
          </div>
          <div class="flex_start mb20" v-if="item.type == 4">
            <div>批准人:</div>
            <el-select class="ml10 flex_item" placeholder="请选择" v-model="item.userId" size="small" ref="pizhunuser" filterable @change="changeItemSelect($event,item)">
              <el-option v-for="(item, i) in Alluser" :key="i" :value="item.value" :label="item.label"></el-option>
            </el-select>
          </div>
        </div>
      </div>
    </basic-container>
    <el-dialog title="添加/编辑评审人员" append-to-body :visible.sync="showaddUser" width="555px">
      <el-form size="small">
        <el-form-item label="评审部门">
          <el-cascader
            placeholder="请选择"
            ref="newdept"
            :options="deptOption"
            v-model="newMember.deptId"
            :show-all-levels="false"
            :props="{
              value: 'id',
              label: 'deptName',
              emitPath: false,
              checkStrictly: true
            }"
            filterable
            @change="getMemberOption"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="评审人员">
          <el-select placeholder="请选择" v-model="newMember.userId" filterable>
            <el-option v-for="(item, i) in newMember.memberOption" :key="i" :value="item.id" :label="item.name"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer"><el-button size="small" type="primary" @click="addMember()">确定</el-button></div>
    </el-dialog>
  </div>
</template>

<script>
  import fileMinixs from "@/mixins/file.js"
  import {getuserByDept} from '@/api/myapi/common';
export default {
  mixins:[fileMinixs],
  data() {
    return {
      showaddUser: false,
      guifanFilesProcessRecordList: [
        {
          userId: '',
          userName: '',
          type: 0
        },
        {
          userId: '',
          userName: '',
          type: 1
        },
        {
          userId: '',
          userName: '',
          type: 4
      }
      ],
      newMember: {
        deptId: '',
        deptName: '',
        userId: '',
        userName: '',
        type:2,
        memberOption:[]
      },
      isOnlineReview: false,
      tableData: [],
    };
  },
  created() {
    this.getdeptlist();
    this.getAlluser();
    this.guifanFilesProcessRecordList[0].userName =`${this.userInfo.deptName}/${this.userInfo.real_name}`;
    this.guifanFilesProcessRecordList[0].userId = this.userInfo.user_id;
	this.guifanFilesProcessRecordList[0].deptId=this.userInfo.dept_id;
	this.guifanFilesProcessRecordList[0].deptName=this.userInfo.deptName;
  },
  watch:{
	  isOnlineReview(newval) {
	  	if (!newval) {
	  		this.tableData=[];
	  	}
	  }
  },
  methods: {
    // 添加评审
    addUser(options,item, index) {
      if (item) {
        this.newMember = {
          ...item,
          index,
          options
        };
      } else {
        this.newMember = {
          deptId: '',
          deptName: '',
          userId: '',
          userName: '',
          index:this.tableData.length,
          type:2,
          options
        };
      }
      this.showaddUser = true;
    },
    delUser(index) {
      this.tableData.splice(index, 1);
      this.guifanFilesProcessRecordList.splice(index+2, 1);
    },
    setProcessRecord(array){
      this.tableData=array.filter(item=>item.type==2);
      for (let i=0;i<=array.length-1;i++){
        let item=array[i];
        item.userName=`${item.createDeptName}/${item.createUserName}`;
        if ( item.type==2 &&item.userId) {
        	this.isOnlineReview=true;
        }
      }
       this.guifanFilesProcessRecordList=array;
    },
    getPeshenUser(val,form){
      getuserByDept({
        deptId: val
      }).then(({
        data
      }) => {
        if (data && data.success) {
          this.$set(form, 'memberOption', data.data);
        }
      });
    },
    getMemberOption(e) {
      let dept = this.$refs.newdept.getCheckedNodes();
      this.newMember.deptName = dept[0].label;
      this.newMember.deptId = dept[0].value;
      this.newMember.userId = '';
      this.newMember.userName = '';
      this.getPeshenUser(dept[0].value, this.newMember);
    },
    changeItemSelect(id,form){
     let user = this.Alluser.find(item => item.value == id);
     form.userName = user.label;
    },
    // 添加评审
    addMember() {
      if (!this.newMember.deptId) {
        this.$message.error('请选择评审部门');
        return;
      }
      if (!this.newMember.userId) {
        this.$message.error('请选择评审人员');
        return;
      }
      let user = this.newMember.memberOption.find(item => item.id == this.newMember.userId);
      console.log(user);
      this.newMember.userName =`${this.newMember.deptName}/${user.name}` ;
      if (this.newMember.options=='edit') {
        this.tableData[this.newMember.index] = {
          ...this.newMember
        };
      } else {
        this.tableData.push({
          ...this.newMember
        });
      }
      this.guifanFilesProcessRecordList.splice(this.newMember.index+2, 0, this.newMember);
      this.showaddUser = false;
    }
  }
};
</script>

<style scoped="scoped" lang="scss">
.border {
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  line-height: 32px;
  padding: 0 10px;
}
::v-deep .el-checkbox.is-bordered {
  height: 32px;
  padding: 5px 10px;
}
.tabledata {
  padding: 0 10px 10px;
  .addbtn {
    padding-top: 10px;
  }
}
</style>
